<style>
    .panelX {
        border:1px solid RGB(51,122,183);
        box-shadow: 1px 3px 3px -1px gray;
        border-radius: 4px;
    }
    .panelX:hover {
        box-shadow: 4px 4px 3px -1px gray;
    }
    .panel-heading {
        color: white;
        background-color: RGB(51,122,183);
        /*border-bottom: 1px solid lightgray;*/
    }
</style>
<div id="verderAdd" class="row rowSet" style=" height:100%;margin: 0px;padding: 0px;"  xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"  >
    <div id="bodyFrame"  class="panel panel-default" style="border-radius: 0px;">
        <div id="topBody"  class="panel-heading" style="padding: 10px">
            <h3 class="panel-title pull-left" > 修改实体 </h3>
            <button type="button" v-on:click="jumpToList()" class="btn btn-primary pull-right" style="margin-top: -7px">返回</button>
            <br/>
        </div>
        <div   id="centerBody" class="panel-body" style="margin-top: 5px;" >
            <!--厂商配置-->
            <div class="col-md-12 column" style="margin-bottom: 10px">
                <div class="panelX" style="margin: 0px">
                    <div class="panel-heading">
                        <h3 class="panel-title"> 厂商配置 </h3>
                    </div>
                    <div class="panel-body">
                        <!--表单部分-->
                        <div class="col-md-12 column">
                            <div class="row">
                                <div class="form-group col-md-6"  >
                                    <label for="inputFile0" class="col-md-2 control-label" style="text-align: right">厂商ID：</label>
                                    <div class="col-md-10">
                                        <input type="text"  v-model="venderInfoDto.venderMainDao.id"   class="form-control" id="inputFile0" disabled="disabled"/>
                                    </div>
                                </div>
                                <div class="form-group col-md-6" >
                                    <label for="inputFile1" class="col-md-2 control-label" style="text-align: right">厂商名称：</label>
                                    <div class="col-md-10">
                                        <input type="text"   v-model="venderInfoDto.venderMainDao.name"   class="form-control" id="inputFile1" />
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-md-6"  >
                                    <label for="inputFile2" class="col-md-2 control-label" style="text-align: right">厂商类型：</label>
                                    <div class="col-md-10">
                                        <!--待选类型队列-->
                                        <select class="form-control" v-model="venderInfoDto.venderMainDao.type" id="inputFile2"  >
                                            <template v-for="item in dicts.VenderType.list" >
                                                <option v-if="item.codeCode == venderInfoDto.venderMainDao.type"  v-bind:value="item.codeCode" selected>{{item.codeValue}}</option>
                                                <option v-else v-bind:value="item.codeCode">{{item.codeValue }}</option>
                                            </template>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-6" >
                                    <label for="inputFile3" class="col-md-2 control-label" style="text-align: right">厂商状态：</label>
                                    <div class="col-md-10">
                                        <!--<input type="text"  v-model="venderInfoDto.venderMainDao.state"  class="form-control" id="inputFile3" />-->
                                        <select   v-model="venderInfoDto.venderMainDao.state"  class="form-control" id="inputFile3"  >
                                            <option   value="0">编辑</option>
                                            <option   value="1">起用</option>
                                            <option   value="2">停用</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div><!--第一行end-->

                    </div>
                </div>
            </div>
            <!--详细信息部分-->
            <div class="col-md-12 column" style="margin-bottom: 10px">
                <div class="panelX" style="margin: 0px">
                    <div class="panel-heading">
                        <h3 class="panel-title"> 厂商详细资料 </h3>
                    </div>
                    <div class="panel-body">
                        <li v-for="(item, index) in venderInfoDto.venderItemDetailDaoList" style="list-style-type:none">
                            <div class="form-group col-md-6">
                                <label for="inputFile-detail-{{index}}" class="col-md-2 control-label" style="text-align: right">{{item.itemName}} : </label>
                                <div class="col-md-10">
                                    <input type="text"  v-model="item.itemValue"  class="form-control" id="inputFile-detail-{{index}}" />
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
            </div>
            <!--图片部分-->
            <div class="col-md-12 column" style="margin-bottom: 10px">
                <div class="panelX" style="margin: 0px">
                    <div class="panel-heading">
                        <h3 class="panel-title"> 厂商图片资料 </h3>
                    </div>
                    <div class="panel-body" style="padding: 0px">
                        <!--照片展示列表-->
                        <table class="table table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>图片</th> <th>顺序</th> <th>位置</th> <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in venderInfoDto.venderImgDetailDaoList">
                                <td width="10%">
                                    <img :src="$ImageUrl(item.imgId,'small')"   class="img-thumbnail"  />
                                </td>
                                <td width="20%">
                                    <input type="number"  v-model="item.venderDesc"  class="form-control"   />
                                </td>
                                <td width="20%">
                                    <select class="form-control" v-model="item.place"   >
                                        <option value="0">主图</option>
                                        <option value="1">厂商资料</option>
                                    </select>
                                </td>
                                <td>
                                    <button type="button" class="btn btn-link"  v-on:click="deleteImg(index)">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--<hr>-->
                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#imgSelModal" >添加图片</button>
                    </div>
                </div>
            </div>
        </div>
        <div   id="bottomBody" class="panel-footer" style="background-color: white;">
            <button type="button" v-on:click="submit" class="btn btn-primary btn-lg btn-block "  v-if="isShow">提交保存</button>
        </div>
    </div>
</div>


<div id = "imgSel"></div>

<script src="/js/common/vue-const.js"></script>
<script>
    $(document).ready(function(){
        //采用vue
        var venderAdd=new Vue({
            el: '#verderAdd',
            data: {
                //提交的url
                submitUrl: Vue.prototype.getUrl('/product/vender/saveVenderInfo'),
                dictUrl: Vue.prototype.getUrl('/product/dict/findByType'),
                venderQueryUrl:Vue.prototype.getUrl('/product/vender/getVender/'),
                venderInfoDto:{
                    venderMainDao:{
                        id:null,
                        name:'', //名称
                        typeId:'', //类型
                        state:'0',//状态
                    },
                    venderItemDetailDaoList:[],
                    venderImgDetailDaoList:[]
                },
                dicts:{
                    VenderType:{ list:[], map:new Map()},
                    Contact:{ list:[], map:new Map()}
                },
                filePath : '',
                isEdit : false,
                isShow : true,
            },
            methods: {
                submit: function() {
                    if(!this.submitCheck()){ //数据校验
                        return false;
                    }
                    //走提交流程
                    this.$http.post(this.submitUrl,this.venderInfoDto).then(function(data){
                        if(data.data.success){
                            this.isShow = false;
                            alert("保存成功");
                            //更新厂商id
                            //this.venderInfoDto.venderMainDao.id = data.data.data[0].venderMainDao.id;
                        }else{
                            alert("保存失败："+data.data.errorMessage);
                        }

                    }).catch(function(){
                        alert('服务器异常！');
                    });

                },
                jumpToList:function() {
                    //加载页面
                    loadPageToBodyMain('/show/product/vender/venderList');
                },
                deleteImg:function(index){
                    if(confirm('确定删除此照片？')){
                        this.venderInfoDto.venderImgDetailDaoList.splice(index,1);
                    }
                },
                //提交表单前的验证
                submitCheck:function(){
                    console.log('-->'+this.venderInfoDto.venderMainDao.typeId);
                    //校验主信息
                    if(this.venderInfoDto.venderMainDao.name.trim().length == 0){
                        alert('厂商名称不能为空！');
                        return false;
                    }else if(this.venderInfoDto.venderMainDao.type.length == 0){
                        alert('厂商类型不能为空！');
                        return false;
                    }
                    //校验明细信息
                    var itemList = this.venderInfoDto.venderItemDetailDaoList;
                    for(var i = 0 ; i < itemList.length ; i++ ){
                        if(itemList[i].itemValue.trim().length == 0){
                            alert(itemList[i].itemName+'不能为空！');
                            return false;
                        }
                    }
                    //校验图信息
                    var imgList = this.venderInfoDto.venderImgDetailDaoList;
                    var  ishaveMain = false;
                    for(var i = 0 ; i < imgList.length ; i++ ){
                        if(imgList[i].place == 0){
                            ishaveMain = true;
                            break;
                        }
                    }
                    if(!ishaveMain){
                        alert('厂商至少选择一张主图！');
                        return false;
                    }

                    return true;
                },
                initDetail:function () {
                    console.log('initDetail');
                    var contactDict = this.dicts.Contact.list;
                    for(var i =0;i<contactDict.length;i++){
                        //判断是否已经存在对象
                        if(this.isHaveItem(contactDict[i].id)){
                            continue;//跳过
                        }
                        var venderItemDetailDao = {
                            id:null,
                            parentId:null,
                            itemConfigId:contactDict[i].id,
                            itemName:contactDict[i].codeValue,
                            itemValue:''
                        }
                        console.log(venderItemDetailDao);
                        //加入
                        this.venderInfoDto.venderItemDetailDaoList.push(venderItemDetailDao);
                    }
                },
                //判断是否已经存在
                isHaveItem(itemConfigId){
                    for(var i=0;i<this.venderInfoDto.venderItemDetailDaoList.length;i++){
                        if(this.venderInfoDto.venderItemDetailDaoList[i].itemConfigId == itemConfigId){
                            return true;
                        }
                    }
                    return false;
                },
                loadByVenderId:function(id){
                    //发请求获取字典内容
                    console.log('loadByVenderId');
                    this.$http.post(this.venderQueryUrl+id).then(function(data){
                        console.log(this.venderQueryUrl+': '+data.data.success);
                        if(data.data.success){
                            this.venderInfoDto = data.data.data;
                            //重置明细
                            this.initDetail();
                            console.log('loadByVenderId end!');
                            //调整提交的url为修改
                            this.submitUrl= Vue.prototype.getUrl('/product/vender/updateVender');
                        }else{
                            alert("查询供应商失败："+data.data.errorMessage);
                        }
                    }).catch(function(e){
                        alert('服务器异常！'+ e);
                    });
                }
             },


            created: function () {
                //加载列表
                var that_ = this;
                this.$loadDicts(this.dicts,function(codeType){
                    if (codeType == 'Contact') {
                        that_.initDetail();
                    }
                });

            },
        });
        //加入图片选择的控件
        $('#imgSel').load(Vue.prototype.getUrl('/show/page/common/imgSelectList'));
        //重写图片选择回掉方法
        Vue.prototype.selectedImg = function selectedImg(imgId) {
//            alert(imgId);
            var imgList = venderAdd.venderInfoDto.venderImgDetailDaoList;
            //配置图片
            var venderImgDetailDao = {
                id:null,
                imgId:imgId,
                parentId:null,
                venderDesc:imgList.length,
                place:0
            };
            console.log(venderImgDetailDao);
            //加入
            imgList.push(venderImgDetailDao);
        };


        //判断是否是修改
        if(sessionStorage.editId!=null && sessionStorage.editId!='null'){
            console.log('venderId=>'+sessionStorage.editId);
            venderAdd.loadByVenderId(sessionStorage.editId);
            sessionStorage.editId = null;
        }

    });







</script>
<!--</body>-->
<!--</html>-->